import { useEffect, useState } from 'react'
import { Flex, Select, Input } from 'antd'
import style from './style.module.less'
// import { getCompanyFilterOptions, getGmTagTree, getHsTagTree, getcantonTree } from '@/api/park.ts'
import { getCompanyFilterOptions, getGmTagTree, getHsTagTree } from '@/api/park.ts'
import { DatePicker, TreeSelect } from 'antd'
import searchImg from '../../img/search.png'
import { debounce } from 'lodash'
import dayjs from 'dayjs'
import { getAreaOptions } from '@/hooks/useMonitors'

const { RangePicker } = DatePicker

interface ParamsType {
  setSearchValue: (a: any) => void
  searchValue?: any
}
const areaOptions = getAreaOptions()

// 递归查找选中区域层级

const TableSearchBox = ({ setSearchValue }: ParamsType) => {
  const [savedValue, setSavedValue] = useState<any>({})
  // const [areaOptions, setAreaOptions] = useState([])
  const [gbTypeOptions, setGbTypeOptions] = useState([])
  const [hsTypeOptions, setHsTypeOptions] = useState([])
  const [registOptions, setRegistOptions] = useState([])
  const [companyTypeOptions, setCompanyTypeOptions] = useState([])
  const [foundYearOptions, setFoundYearOptions] = useState([])

  const handleReset = () => {
    setSavedValue({})
    setSearchValue({})
  }
  // 递归处理国标行业分类和火石行业分类选项数据
  const handleData = (data: any) => {
    data.forEach((element: any) => {
      element.title = element.name
      element.value = element.id
      if (element.children) {
        handleData(element.children)
      }
    })
  }
  const suffix = (
    <div
      onClick={debounce(() => {
        setSearchValue({ ...savedValue })
      }, 500)}>
      <img
        src={searchImg}
        alt=""
        style={{
          fontSize: 16,
          color: '#1677ff',
          cursor: 'pointer',
          width: '20px',
          height: '20px'
        }}
      />
    </div>
  )
  useEffect(() => {
    let ignore = false
    if (!ignore) {
      // getcantonTree().then((res: any) => {
      //   setAreaOptions(
      //     res.map((it: any) => ({
      //       label: it.name,
      //       value: it.id,
      //       id: it.id
      //     }))
      //   )
      // })
      getGmTagTree().then((res: any) => {
        handleData(res)
        setGbTypeOptions(res)
      })
      getHsTagTree().then((res: any) => {
        handleData(res)
        setHsTypeOptions(res)
      })
      getCompanyFilterOptions().then((res: any) => {
        setRegistOptions(
          res
            .find((item: any) => item.name === '注册资本')
            .children.map((it: any) => ({
              label: it.name,
              value: it.name,
              id: it.id
            }))
        )
        setCompanyTypeOptions(
          res
            .find((item: any) => item.name === '公司类型')
            .children.map((it: any) => ({
              label: it.name,
              value: it.name,
              id: it.id
            }))
        )
        setFoundYearOptions(
          res
            .find((item: any) => item.name === '成立年限')
            .children.map((it: any) => ({
              label: it.name,
              value: it.name,
              id: it.id
            }))
        )
      })
    }
    return () => {
      ignore = true
    }
  }, [])
  return (
    <Flex gap={4} wrap="nowrap" align="flex-start" vertical>
      <div className={style.searchWrapBox}>
        <div className={style.searchWrap}>
          <Input
            value={savedValue.keywords}
            className="w-full"
            placeholder="请输入公司名称"
            onPressEnter={() => {
              setSearchValue({ ...savedValue })
            }}
            onChange={(e: any) => {
              setSavedValue({ ...savedValue, keywords: e.target.value })
            }}
            suffix={suffix}></Input>
        </div>
        <div className={style.reSet} onClick={() => handleReset()}>
          重置搜索
        </div>
      </div>
      <Flex gap={14} wrap="wrap" align="flex-start">
        {/* <div className={style.selectWrap}>
          <Select
            value={savedValue.provinceCode}
            className="w-full"
            placeholder="请选择注册地区"
            options={areaOptions}
            allowClear
            onChange={(e: any) => {
              setSavedValue({ ...savedValue, provinceCode: e })
              setSearchValue({ ...savedValue, provinceCode: e })
            }}
          />
        </div> */}
        <div className={style.selectWrap}>
          <TreeSelect
            className="w-full"
            allowClear
            placeholder="请选择地区"
            value={savedValue.area}
            treeData={areaOptions}
            maxTagCount={1}
            onChange={(e: any, f, h) => {
              const newValue = {
                ...savedValue,
                area: e
              }
              if (e) {
                if (h.triggerNode.props.type !== 'district') {
                  newValue[`${h.triggerNode.props.type}Code`] = e
                } else {
                  newValue[`areaCode`] = e
                }
              } else {
                newValue.provinceCode = undefined
                newValue.cityCode = undefined
                newValue.areaCode = undefined
              }
              setSavedValue(newValue)
              setSearchValue(newValue)
            }}
          />
        </div>
        <div className={style.selectWrap}>
          <TreeSelect
            className="w-full"
            allowClear
            placeholder="请选择国标行业分类"
            multiple
            value={savedValue.neaIndStr}
            treeData={gbTypeOptions}
            maxTagCount={1}
            onChange={(e: any) => {
              setSavedValue({ ...savedValue, neaIndStr: e })
              setSearchValue({ ...savedValue, neaIndStr: e })
            }}
          />
        </div>
        <div className={style.selectWrap}>
          <TreeSelect
            className="w-full"
            multiple
            allowClear
            placeholder="请选择火石行业分类"
            value={savedValue.hsIndStr}
            treeData={hsTypeOptions}
            maxTagCount={1}
            onChange={(e: any) => {
              setSavedValue({ ...savedValue, hsIndStr: e })
              setSearchValue({ ...savedValue, hsIndStr: e })
            }}
          />
        </div>
        <div className={style.selectWrap}>
          <Select
            className="w-full"
            placeholder="请选择注册资本"
            mode="multiple"
            allowClear
            value={savedValue.recapitalAmtCal}
            options={registOptions}
            maxTagCount={1}
            onChange={(e: any) => {
              setSavedValue({ ...savedValue, recapitalAmtCal: e })
              setSearchValue({ ...savedValue, recapitalAmtCal: e })
            }}
          />
        </div>
        <div className={style.selectWrap}>
          <Select
            className="w-full"
            placeholder="请选择企业类型"
            allowClear
            value={savedValue.companyType}
            options={companyTypeOptions}
            onChange={(e: any) => {
              setSavedValue({ ...savedValue, companyType: e })
              setSearchValue({ ...savedValue, companyType: e })
            }}
          />
        </div>
        <div className={style.selectWrap}>
          <Select
            className="w-full"
            placeholder="请选择成立年限"
            allowClear
            value={savedValue.foundDate}
            options={foundYearOptions}
            onChange={(e: any) => {
              setSavedValue({ ...savedValue, foundDate: e })
              setSearchValue({ ...savedValue, foundDate: e })
            }}
          />
        </div>
        <div className={style.selectWrap}>
          <RangePicker
            allowClear
            format={{
              format: 'YYYY-MM-DD'
            }}
            value={[
              savedValue.publishDate && savedValue.publishDate[0] !== null && savedValue.publishDate[0] !== undefined
                ? dayjs(savedValue.publishDate[0])
                : null,
              savedValue.publishDate && savedValue.publishDate[1] !== null && savedValue.publishDate[1] !== undefined
                ? dayjs(savedValue.publishDate[1])
                : null
            ]}
            placeholder={['公告开始时间', '公告结束时间']}
            onChange={(e: any, dateString: any) => {
              if (dateString[0] || dateString[1]) {
                setSavedValue({ ...savedValue, publishDate: dateString })
              } else {
                setSavedValue({ ...savedValue, publishDate: [null, null] })
              }

              setSearchValue({ ...savedValue, publishDate: dateString })
            }}
          />
        </div>
      </Flex>
    </Flex>
  )
}

export default TableSearchBox
